<template>
  <div class="home">
    <!-- 导航栏 -->
    <van-nav-bar title="课程讲师" left-arrow @click-left="$router.go(-1)" />
    <!-- tabb栏切换 -->
    <van-tabs v-model:active="tabactive" @click="onClickTab">
      <van-tab
        :title="item.name"
        v-for="(item, index) in allListhq"
        :key="index"
        :name="item.id"
      >
        <div class="xinxi" v-for="(item, index) in list" :key="index">
          <div class="l">
            <img
              :src="item.avatar"
              alt=""
              class="img"
              @click="goteacher(item.teacher_id)"
            />
          </div>
          <div class="r">
            <div class="rt">{{ item.name }}</div>
            <div class="rb">{{ item.teacher_info }}</div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { getALLXIANGQXQNEWApi, getALLListXIANGQXQNEWApi } from '../http/api.js'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const data = reactive({
      list: [],
      tabactive: 0,
      allListhq: []
    })
    onMounted(() => {
      getlist()
      onClickTab()
    })
    const getlist = async () => {
      const res = await getALLXIANGQXQNEWApi()
      console.log('所有的老师', res)
      data.allListhq = res
    }
    const onClickTab = async (name) => {
      console.log('下标', name)
      const res = await getALLListXIANGQXQNEWApi(name)
      console.log('请求的数据', res)
      data.list = res
    }
    // 跳转到详情老师的函数
    const goteacher = (id) => {
      router.push('/teacherD?id=' + id)
    }
    return {
      ...toRefs(data),
      onClickTab,
      goteacher
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .xinxi {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    display: flex;
    .l {
      width: 30%;
      .img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        margin-left: 20px;
      }
    }
    .r {
      width: 70%;
      .rt {
        font-weight: 500;
        font-size: 16px;
      }
      .rb {
        font-size: 13px;
        color: #666;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
